/**
 * 状态报表页面
 * wangmei
 */
import React from 'react';
import echarts from 'echarts';
import { DatePicker, Button, Form, Row, Col, message, Select, Spin } from 'antd';
import BreadcrumbCustom from '../../BreadcrumbCustom';
import * as Request from '../../../Server/Upgrade';
import * as Const from '../../../common/const';
import qs from 'qs';
import moment from 'moment';
import EchartsPage from './EchartPage';
import SignChart from '../report/EchartPage';

const FormItem = Form.Item;
const dateFormat = 'YYYY-MM-DD';
const currentData = new Date();
const Option = Select.Option;

class Permission extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            xData: [],
            legendData: [], //图例
            series: [], //图表数据
            selectValue: '', //下拉选择的值
            dataValue: currentData, //时间信息
            loading: false,
        }
    }

    componentWillMount() {
        this.getChartData();
    }

    getChartData = () => {
        const { selectValue, dataValue } = this.state;
        this.setState({loading: true});
        const param = {
            date: moment(dataValue).format(dateFormat),
            chartType: 'responseStatus'
        }
        const _param = qs.stringify(param);
        Request.logStatusGetChart(_param).then(res => {
            if (res && res.code == Const.REQUEST_SUCCESS) {
                let data = res.data.points;
                let xData = []; //x轴数据
                let yData = []; //y轴数据
                let legendData = []; //图例数据 
                let series = []; //图表数据
                for (let i = 0; i < data.length; i++) {
                    let time = moment(data[i].x, 'HH:mm:ss').format('HH:mm:ss');
                    xData.push(time);
                    yData.push(data[i].y);
                }
                Const.CHARTSTATUS.map((item, index) => {
                    legendData.push(item.title);
                    let dataValue = [];
                    for (let i = 0; i < yData.length; i++) {
                        dataValue.push(yData[i][index])
                    }
                    let serierObj = {
                        smooth: true,
                        name: item.title,
                        data: dataValue,
                        type: 'line',
                        barWidth: Const.STATISTIC_BAR_WIDTH,
                        label: {
                            normal: Const.LABEL_NORMAL
                        },
                        lineStyle: {
                            width: Const.STATISTIC_LINE_WIDTH,
                        }
                    }
                    series.push(serierObj);
                });
                if (selectValue != '') {
                    let temp = Const.CHARTSTATUS.filter(v => v.value == selectValue)[0];
                    legendData = [temp.title];
                    series = series.filter(v => v.name == temp.title);
                }
                this.setState({
                    xData,
                    legendData,
                    series,
                    loading: false,
                })
            } else {
                this.setState({
                    loading: false,
                })
                res && res.code !== Const.REQUEST_UNAUTHORIZED && message.error(res.msg);
            }
        })
    }

    //时间切换
    onChange = (date, dateString) => {
        this.setState({
            dataValue: dateString
        })
    }

    //禁止日期
    disabledDate = (current) => {
        // Can not select days before today and today
        return current && current.valueOf() > Date.now();
    }

    //查询方法
    selectFunc = () => {
        this.getChartData();
    }

    //下拉框切换
    handleChange = (value) => {
        this.setState({
            selectValue: value
        })
    }

    render() {
        const { xData, series, legendData, dataValue } = this.state;

        const formItemLayout = {
            labelCol: {
                xs: { span: 24 },
                sm: { span: 7 },
            },
            wrapperCol: {
                xs: { span: 24 },
                sm: { span: 17 },
            },
        };
        const formatter = moment(dataValue).format('YYYY年MM月DD日') + "<br />{b}<br />{a0} : {c0}"
            + "<br />{a1} : {c1}<br />{a2} : {c2}<br />{a3} : {c3}<br />{a4} : {c4}<br />{a5} : {c5}"
            + "<br />{a6} : {c6}<br />{a7} : {c7}<br />{a8} : {c8}<br />{a9} : {c9}<br />{a10} : {c10}"
            +"<br />{a11} : {c11}";

        return (
            <div style={{height: '100%'}}>
                <BreadcrumbCustom first={"状态报表"} />
                <Spin spinning={this.state.loading} >
                    <Form layout="inline" >
                        <FormItem
                            {...formItemLayout}
                            label="选择日期"
                        >
                            <DatePicker
                                defaultValue={moment(currentData, dateFormat)}
                                format={dateFormat}
                                placeholder="请选择日期"
                                onChange={this.onChange}
                                allowClear={false}
                                disabledDate={this.disabledDate}
                                locale={{
                                    "lang": {
                                        today: '今天',
                                        yearFormat: "YYYY年",
                                        monthSelect: "选择月份",
                                        yearSelect: "选择年份",
                                    }
                                }}
                            />
                        </FormItem>
                        <FormItem
                            {...{
                                labelCol: {
                                    xs: { span: 24 },
                                    sm: { span: 8 },
                                    md: 6,
                                    lg: 5
                                },
                                wrapperCol: {
                                    xs: { span: 24 },
                                    sm: { span: 16 },
                                    md: 16,
                                    lg: 16
                                },
                            }}
                            label="状态"
                        >
                            <Select defaultValue="" style={{ width: 165 }} onChange={this.handleChange}>
                                <Option value="">全部</Option>
                                {Const.CHARTSTATUS.map((item, index) => {
                                    return <Option value={item.value} >
                                        {item.title}
                                    </Option>
                                }
                                )}
                            </Select>
                        </FormItem>
                        <FormItem className='button-margin'>
                            <Button type="primary" onClick={() => this.selectFunc()}>查询</Button>
                        </FormItem>
                    </Form>
                    {series.length == 1 ? <SignChart
                        formatter={moment(dataValue).format('YYYY年MM月DD日') + '<br />{b}<br />{a} : {c}'}
                        title={'状态报表'}
                        xName="时间"
                        yName="数量"
                        xData={xData}
                        yData={series[0].data}
                        legendData={legendData}
                    /> : <EchartsPage
                        formatter={formatter}
                        title={'状态报表'}
                        xName="时间"
                        yName="数量"
                        xData={xData}
                        series={series}
                        legendData={legendData}
                    />}
                </Spin>
            </div>
        )
    }
}

export default Permission;
